<script setup lang="ts">
import {defineAsyncComponent, onMounted, watch, ref} from "vue";
import {useStore} from "vuex";
import LangComponent from "./components/Lang.vue";

const store = useStore();

const navbarState = ref(store.state.navbarState);
const tabbarState = ref(store.state.tabbarState);
const loadingState = ref(store.state.loadingState);

const dynamicImportComponent = (componentName: string) => {
  return defineAsyncComponent(() => import(`./components/${componentName}.vue`));
};

// 动态导入头部导航组件
const navbar = dynamicImportComponent('Navbar');
// 动态导入底部导航组件
const tabbar = dynamicImportComponent('Tabbar');

//监听顶部和底部
const dynamicWatch = (params: string[]) => {
  if (params.includes('navbarState')) {
    watch(() => store.state.navbarState, (newNavbarState: boolean) => {
      navbarState.value = newNavbarState;
    });
  }

  if (params.includes('tabbarState')) {
    watch(() => store.state.tabbarState, (newTabbarState: boolean) => {
      tabbarState.value = newTabbarState;
    });
  }

  if (params.includes('loadingState')) {
    watch(() => store.state.loadingState, (newLoadingState: boolean) => {
      loadingState.value = newLoadingState;
    });
  }
};

onMounted(() => {
  dynamicWatch(['navbarState', 'tabbarState', 'loadingState']);
});
</script>

<template>
  <van-overlay :show="loadingState"
               style="background-color: #ffffff;display: flex;align-items: center;text-align: center">
    <van-loading color="#1989fa" style="margin: 0 auto"/>
  </van-overlay>

  <div v-show="!loadingState">
    <header>
      <component :is="navbar" v-if="navbarState"/>
    </header>
    <main>
      <RouterView/>
    </main>

    <div class="underlay" v-if="tabbarState"/>

    <footer>
      <component :is="tabbar" v-if="tabbarState"/>
    </footer>


    <LangComponent/>

    <van-back-top/>
  </div>
</template>

<style lang="less">
@import "./less/public.less";
</style>
